<template>
	<div class="core-wraper">

		<div class="card" v-for="item in pageState.cores" :key="item.id" @click="chooseCard(item)"
			:class="{ 'active-card': pageState.selectedCardId == item.id }">
			<div class="title">
				<span> {{ item.label }}</span>
				<a-popover placement="top">
					<template slot="content">
						<p>{{ item.desc }}</p>
					</template>
					<a-icon type="info-circle" class="icon" />
				</a-popover>
			</div>
			<CountTo class="num" :deadNum="item.value" separatorStr="," />

			<div class="bottom">
				<span class="info">周同比</span>
				<Trend class="total-num" :suffix="item.weekValue" :value="item.weekValue" :decimal="2" />

				<span class="info mla">对比期</span>
				<Trend class="total-num" :suffix="item.dayValue" :value="item.dayValue" :decimal="2" />
			</div>
		</div>
	</div>
</template>

<script>

import Trend from "@/components/trend.vue";
import CountTo from "@/components/count-to.vue";

export default {
	name: 'core-card',
	components: {
		Trend,
		CountTo,
	},
	props: {
		pageState: {
			type: Object,
			default: () => ({})
		}
	},

	methods: {
		chooseCard(card) {
			if (this.pageState.selectedCardId == card.id) {
				return
			}
			this.pageState.selectedCardId = card.id
			this.$emit('selectCard', card)
		}
	}
}

</script>
<style scoped>
.core-wraper {
	background-color: #fff;
	padding: 16px;
	height: 200px;
	margin-bottom: 20px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	display: flex;
	gap: 20px;
}

.card {
	border: 1px solid #dddddda3;
	padding: 16px;
	border-radius: 4px;
	width: 400px;
	cursor: pointer;
	transition: all ease 0.3s;
}

.card:hover {
	box-shadow: 0 0 5px rgba(156, 156, 156, 0.2);
}

.title {
	display: flex;
	justify-content: space-between;
	margin-bottom: 16px;
}

.num {
	font-size: 32px;
	margin-bottom: 24px;
}

.bottom {
	display: flex;
	align-items: center;
}

.info {
	margin-right: 4px;
}

.mla {
	margin-left: auto;
}

.icon {
	cursor: pointer;
}

.icon:hover {
	color: #1885FF;
}

.active-card .icon:hover {
	color: #fff;
}

.active-card {
	color: #fff;
	background-color: #1885FF;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
</style>
